<template>
  <div class="home-blog">
    <div class="hero">
      <div class="auto-scorll">
        <vue-seamless-scroll
          :data="visitList"
          class="warp"
          :class-option="classOption"
        >
          <ul class="item">
            <li
              v-for="(item, index) in visitList"
              :key="index"
            >
              <span
                class="title"
                v-text="item.title"
              ></span>
              <span
                class="date"
                v-text="item.date"
              ></span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>

      <div>
        <img
          class="hero-img"
          src="../../../public/img/live.jpg"
          alt=""
        />
        <h1>{{ username }}</h1>
        <p class="experience">没有伞的孩子必须努力奔跑 —— 永远清醒 永远温柔 永远知进退</p>
      </div>
    </div>

    <div
      class="list-box"
      id="list-box"
    >
      <el-card
        @click.native="onDetail(item)"
        shadow="always"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="title">{{ item.title }}</div>
        <div
          class="description"
          v-if="item.description"
        >
          {{ item.description }}
        </div>
        <div class="box-bottom">
          <div @click.stop="getArticleList(item.user_name)">
            <i class="el-icon-user"></i>
            <span style="margin-left: 10px">{{ item.user_name }}</span>
          </div>

          <div
            v-if="item.creat_time"
            style="margin: 0px 15px"
          >
            <i class="el-icon-date"></i>
            <span style="margin-left: 10px">{{ item.creat_time }}</span>
          </div>

          <div v-if="item.tag && item.tag.length">
            <i class="el-icon-price-tag"></i>
            <span
              style="margin-left: 10px"
              v-for="(v, i) in item.tag"
              :key="i"
              >{{ v }}</span
            >
          </div>
        </div>
      </el-card>

      <el-pagination
        style="padding: 20px"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="10"
        layout="total, prev, pager, next,jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'

const tagList = [
  { name: 'js', id: 1 },
  { name: 'css', id: 2 },
  { name: 'Node.js', id: 3 },
  { name: '代码规范', id: 4 },
  { name: 'Vue', id: 5 },
  { name: 'React', id: 6 },
  { name: '数据库', id: 7 },
  { name: '面试', id: 8 },
  { name: '算法', id: 9 },
  { name: '架构', id: 10 },
]
export default {
  name: 'HomePage', // 首页
  components: {},
  computed: {
    ...mapGetters({
      getKeywords: 'artic/getKeywords',
      getAuth: 'artic/getAuth',
    }),
  },
  data() {
    //这里存放数据
    return {
      currentPage: 1,
      total: 10,
      username: '',
      classOption: {
        step: 0.5,
      },
      visitList: [
        {
          title: '无缝滚动第一行无缝滚动第一行',
          date: '2017-12-16',
        },
        {
          title: '无缝滚动第二行无缝滚动第二行',
          date: '2017-12-16',
        },
        {
          title: '无缝滚动第三行无缝滚动第三行',
          date: '2017-12-16',
        },
        {
          title: '无缝滚动第四行无缝滚动第四行',
          date: '2017-12-16',
        },
        {
          title: '无缝滚动第五行无缝滚动第五行',
          date: '2017-12-16',
        },
        {
          title: '无缝滚动第六行无缝滚动第六行',
          date: '2017-12-16',
        },
        {
          title: '无缝滚动第七行无缝滚动第七行',
          date: '2017-12-16',
        },
        {
          title: '无缝滚动第八行无缝滚动第八行',
          date: '2017-12-16',
        },
        {
          title: '无缝滚动第九行无缝滚动第九行',
          date: '2017-12-16',
        },
      ],
      list: [
        // {
        //   title: '手把手教你轻松手写防抖和节流🔥',
        //   author: 'admin',
        //   creat_time: '2023-01-01',
        //   description: '相关文章的描述',
        //   tag: ['JavaScript', '手写'],
        // },
        // {
        //   title: '一杯咖啡的时间，告诉你 Vite 凭什么比 Webpack 快',
        //   author: 'admin',
        //   creat_time: '2023-01-02',
        //   tag: ['开发工具', 'webpack'],
        // },
        // {
        //   title: '一杯咖啡的时间，告诉你 Vite 凭什么比 Webpack 快',
        //   author: 'admin',
        //   creat_time: '2023-01-02',
        //   tag: ['开发工具', 'webpack'],
        // },
        // {
        //   title: '一杯咖啡的时间，告诉你 Vite 凭什么比 Webpack 快',
        //   author: 'admin',
        //   creat_time: '2023-01-02',
        //   tag: ['开发工具', 'webpack'],
        // },
        // {
        //   title: '一杯咖啡的时间，告诉你 Vite 凭什么比 Webpack 快',
        //   author: 'admin',
        //   creat_time: '2023-01-02',
        //   tag: ['开发工具', 'webpack'],
        // },
        // {
        //   title: '一杯咖啡的时间，告诉你 Vite 凭什么比 Webpack 快',
        //   author: 'admin',
        //   creat_time: '2023-01-02',
        //   tag: ['开发工具', 'webpack'],
        // },
        // {
        //   title: '一杯咖啡的时间，告诉你 Vite 凭什么比 Webpack 快',
        //   author: 'admin',
        //   creat_time: '2023-01-02',
        //   tag: ['开发工具', 'webpack'],
        // },
        // {
        //   title: '一杯咖啡的时间，告诉你 Vite 凭什么比 Webpack 快',
        //   author: 'admin',
        //   creat_time: '2023-01-02',
        //   tag: ['开发工具', 'webpack'],
        // },
      ],
    }
  },
  watch: {},
  //方法集合
  methods: {
    ...mapMutations({
      setAuth: 'artic/SET_AUTH',
    }),
    handleCurrentChange(val) {
      // console.log(val)
      this.currentPage = val
      this.getArticleList(this.getAuth, this.getKeywords)
      this.onAnchor()
    },

    // 获取文章列表
    async getArticleList(author = '', keywords = '') {
      this.setAuth(author)
      const { code, data } = await this.$axios.post('/api/search-article', {
        keywords,
        author,
        current_page: this.currentPage,
        page_size: 10,
      })

      if (code === 0) {
        this.list = data.list.map(item => {
          const { tags } = item

          const newArr = []
          tags.split(',').forEach(v => {
            tagList.forEach(m => {
              if (v == m.id) {
                newArr.push(m.name)
              }
            })

            item.tag = newArr
          })

          return item
        })
        this.total = data?.pageInfo?.total || 0
      } else {
        this.list = []
      }
    },

    onDetail(row) {
      // console.log(row);
      row.isEdit = true
      this.$router.push({
        path: '/editor',
        query: row,
      })
    },

    // 跳转到指定锚点
    onAnchor() {
      const node = document.getElementById('list-box')
      setTimeout(() => {
        node.scrollIntoView(true)
      }, 500)
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.username = window.localStorage.getItem('username') || 'admin'
    this.getArticleList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style
  lang="scss"
  scoped
>

.home-blog {
  padding: 0;
  margin: 0 auto;

  .hero {
    text-align: center;
    overflow: hidden;
    background: url(../../../public/img/home-bg.svg) center no-repeat;
    margin: 3.6rem auto 0;
    position: relative;
    box-sizing: border-box;
    padding: 0 20px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    .auto-scorll {
      position: absolute;
      left: 0;
      top: 50px;

      .warp {
        height: 270px;
        width: 360px;
        margin: 0 auto;
        overflow: hidden;
        ul {
          list-style: none;
          padding: 0;
          margin: 0 auto;
          li,
          a {
            display: block;
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: space-between;
            font-size: 15px;
          }
        }
      }
    }

    .hero-img {
      max-width: 300px;
      margin: 0 auto 1.5rem;
      max-height: 288px;
      display: block;
      border-radius: 19% 81% 23% 77% / 44% 57% 43% 56%;
      transition: transform 0.25s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
      transform: translateY(0);
      opacity: 1;
    }

    .experience {
      margin: 1.8rem auto;
      font-size: 1.6rem;
      line-height: 1.3;
    }
  }

  .list-box {
    margin: auto;
    width: 800px;
    min-width: 600px;
    cursor: pointer;
    .el-card {
      margin: 10px 0px;
      .title {
        color: #242424;
        font-size: 1.28rem;
        line-height: 46px;
      }

      .description {
        font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
        line-height: 2.2;
      }

      .box-bottom {
        font-family: iconfont, Ubuntu, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
          Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif !important;
        font-size: 13px;
        color: #7f7f7f;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
    }

    /* ::v-deep .el-card.is-hover-shadow:hover {
      box-shadow: $box-shadow-hover !important;
    } */
  }
}
</style>
